<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
		<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
		<META HTTP-EQUIV="EXPIRES" CONTENT="0" />
		<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8" />
		<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en,de" />
		<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW" />
		<META NAME="AUTHOR" CONTENT="Andreas Kasch" />
		<META NAME="COPYRIGHT" CONTENT="&copy; 2013 Andreas Kasch" />
		<META NAME="DESCRIPTION" CONTENT="HTML5 Rendering Methods Evaluation" />
		<META NAME="KEYWORDS" CONTENT="HTML5, Rendering" />
		
		<TITLE>HTML5 Rendering Methods Evaluation - 2D Canvas Rendering</TITLE>
		
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="jquery-1.9.1.min.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="H5R.js"></SCRIPT>
		<STYLE TYPE="text/css">
			#area{
				width: 1250px;
				height: 800px;
				margin: 10px;
				padding: 0;
				box-shadow: 0 0 9px 1px #000;
			}
		</STYLE>
	</HEAD>
	<BODY>
		<h1>H5R (2D canvas) Rendering</h1>
		<p>
			<input type="button" value="1 Entit&auml;t" onclick="start(1,1)"/>
			<input type="button" value="100 Entit&auml;ten" onclick="start(10,10)"/>
			<input type="button" value="1250 Entit&auml;ten" onclick="start(50,25)"/>
			<span id="debug"></span>
		</p>
		<div id="area">
		
		</div>
		<p><a href="index.html">Zur&uuml;ck</a></p>
		<script type="text/javascript">
			var start = function(x, y){
				
				var w = x;
				var h = y;
				
				var TS = {
					"walk": { 
						img: {
							src: "images/RunRight.png",
							sprites: 13,
						}
					}
				};
				
				var SG = [];
				
				var setup = function(){
					var X_SIZE = 25;
					var Y_SIZE = 32;
					
					
					var r = new H5R();
					r.addStage(new H5R.Stage("area"));
				
					for(var i = 0; i < w; i++){
						for(var j = 0; j < h; j++){
							SG.push({
								x: X_SIZE * i,
								y: Y_SIZE * j,
								fps: 60,
								frame: Math.floor(Math.random()*13),
								img: "walk",
							});
						}
					}
					
					SG.push({
						update: function(self, timediff, timepassed){
							if(!self.startTime) self.startTime = timepassed;
							if(!self.frames) self.frames = 0;
							self.frames++;
							if(self.frames >= 1000){
								var time = timepassed - self.startTime;
								var fps = getFramerate(time);
								$("#debug").html("Zeit: " + time/1000. + " Sekunden, FPS: " + fps);
								r.stop();
							}
						},
					});
					
					r.setTileset(TS, function(){
						r.setScenegraph(SG);
					});
					
				};

				var getFramerate = function(time){
					var fr = 1000/(time/1000.);
					return Math.round(fr*100)/100;
				}
				
				setup();
			};
		</script>
	</BODY>
</HTML>